<script setup defer async lang="ts">
import { useI18n } from 'vue-i18n'
import { ref, reactive, onMounted } from 'vue'
import { useUserInfo } from '@/store/user'
import { logout } from '@/api/login'
import { pointsInfo } from '@/api/user'
// import { formatDate } from '@/utils/utils'
const { userInfos } = useUserInfo()
const { t } = useI18n()
const iframeTopValue = ref('0px')
const iframeHeghtValue = ref('0px')
import { convertNumbers } from '@/utils/utils'

const country=ref(1);
	const exchangeRate=ref(1);
	const symbol = ref('$')
//page
const pagedata = reactive({
  todayPoints: 0,
  totalPoints: 0,
  yesterdayPoints: 0,
  showLoginOut: false,
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
  pagelist: [
    'index/index',
    'scan/index',
    'user/index',
    'withdraw/index',
    'user/leaderBoard/index',
    'login/index',
    'user/revenue/revenue',
    'user/withdreawalInfo/withdreawalInfo',
    'user/message/message',
    'user/changPassword/changPassword',
    'user/level/level',
    'user/whatsApp/index',
  ],
})
const pageIndex = ref(3)
const changPage = (e: any) => {
  uni.navigateTo({
    url: '/pages/' + pagedata.pagelist[e],
  })
}
const changMainPage = (e: any) => {
  console.log(getCurrentPages())
  //   window.top?.postMessage(`/pages/${pagedata.pagelist[e]}`, window.location.origin)
  uni.navigateTo({
    url: '/pages/' + pagedata.pagelist[e],
  })
}
const loginOut = async () => {
  const res = await logout()
  if (res.code == 0) {
    useUserInfo().reset()
    changPage(5)
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }
}
const initPage = async () => {
  const res = await pointsInfo()
  if (res.code == 0) {
    pagedata.yesterdayPoints = res.data.yesterdayPoints
    pagedata.totalPoints = res.data.totalPoints
    pagedata.todayPoints = res.data.todayPoints
    uni.setStorageSync('totalPoints', pagedata.totalPoints)
  }
}
initPage()
onMounted(() => {
  // 
  uni.setNavigationBarTitle({
    title: 'Ttask!' + t('Earn money so easy') + '!', // 
  })
  
  symbol.value = uni.getStorageSync('symbol') || '₹'; 
  		country.value=uni.getStorageSync('country') || 1;
  		exchangeRate.value=uni.getStorageSync('exchangeRate') || 1;

  iframeTopValue.value = window.parent?.screenTop + 'px'
  iframeHeghtValue.value = window.parent?.innerHeight - 50 + 'px'
})
//
</script>

<template>
  <view class="user-container">
    <!--  -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
      <view class="floating-shape shape-1">💎</view>
      <view class="floating-shape shape-2">🏆</view>
      <view class="floating-shape shape-3">💰</view>
    </view>

    <!--  -->
    <view class="user-card"  @click="changPage(3)">
      <view class="user-info-section">
        <view class="avatar-container">
          <view class="avatar-circle">
            <text class="avatar-icon">👤</text>
          </view>
        </view>
        <view class="user-text-info">
          <text class="user-name">{{ userInfos.User?.email }}</text>
          <text class="user-id">ID:{{ userInfos.User?.id }}</text>
          <view class="user-level-badge"  @click="changPage(3)">
            <text class="level-text">{{symbol}}{{ convertNumbers(pagedata.totalPoints,exchangeRate) }}</text>
          </view>
        </view>
      </view>
      
      <view class="balance-info-section">
        <view class="balance-item">
          <text class="balance-label">{{ t("Today's commission") }}</text>
          <view class="balance-value">
            <text class="currency-symbol">{{symbol}}{{convertNumbers(pagedata.todayPoints,exchangeRate)}}</text>
          </view>
        </view>
        
        <view class="balance-item">
          <text class="balance-label">{{ t("Yesterday's commission") }}</text>
          <view class="balance-value">
            <text class="currency-symbol">{{symbol}}{{convertNumbers(pagedata.yesterdayPoints,exchangeRate)}}</text>
           <!-- <up-count-to
              :endVal="pagedata.todayPoints"
              separator=","
              color="#667eea"
              duration="500"
              :decimals="2"
              :bold="true"
              fontSize="1.8rem"
            ></up-count-to> -->
          </view>
        </view>
      </view>
    </view>

    <!--  -->
    <view class="menu-container">
      <!--  -->
      <view class="menu-row">
        <view class="menu-card" @click="changPage(6)">
          <view class="menu-icon-wrapper">
            <text class="menu-icon">📊</text>
          </view>
          <text class="menu-title">{{ t('Revenue details') }}</text>
        </view>
        
        <view class="menu-card" @click="changPage(4)">
          <view class="menu-icon-wrapper">
            <text class="menu-icon">💳</text>
          </view>
          <text class="menu-title">{{ t('Ranking List') }}</text>
        </view>
      </view>

      <!--  -->
      <view class="menu-row">
        <view class="menu-card" @click="changPage(7)">
          <view class="menu-icon-wrapper">
            <text class="menu-icon">⭐</text>
          </view>
          <text class="menu-title">{{ t('Withdrawal details') }}</text>
        </view>
        
        <view class="menu-card" @click="changPage(10)">
          <view class="menu-icon-wrapper">
            <text class="menu-icon">👥</text>
          </view>
          <text class="menu-title">{{ t('My lower level') }}</text>
        </view>
      </view>
	  <!--  -->
	  <view class="menu-row">
	    <view class="menu-card" @click="changPage(11)">
	      <view class="menu-icon-wrapper">
	        <text class="menu-icon">📱</text>
	      </view>
	      <text class="menu-title">{{ t('Bound WhatsApp number') }}</text>
	    </view>
	    
	    <view class="menu-card" @click="changPage(8)">
	      <view class="menu-icon-wrapper">
	        <text class="menu-icon">💬</text>
	      </view>
	      <text class="menu-title">{{ t('System Message') }}</text>
	    </view>
	  </view>
	  <!--  -->
	  <view class="menu-row">
	    <view class="menu-card" @click="changPage(9)">
	      <view class="menu-icon-wrapper">
	        <text class="menu-icon">🔒</text>
	      </view>
	      <text class="menu-title">{{ t('Change Password') }}</text>
	    </view>
	    
	    <view class="menu-card" @click="pagedata.showLoginOut = true">
	      <view class="menu-icon-wrapper">
	        <text class="menu-icon">🚪</text>
	      </view>
	      <text class="menu-title">{{ t('Log out') }}</text>
	    </view>
	  </view>
    </view>

    <!--  -->
    <view class="bottom-nav">
      <up-tabbar :value="pageIndex" :fixed="false" :placeholder="false" :safeAreaInsetBottom="false">
        <up-tabbar-item text="" @click="changMainPage(0)">
          <template #inactive-icon>
            <image class="nav-icon-img" src="@/static/img/h_1.png" mode="aspectFit"></image>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="" @click="changPage(1)">
          <template #inactive-icon>
            <image class="nav-icon-img" src="@/static/img/scan_1.png" mode="aspectFit"></image>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="" @click="changPage(3)">
          <template #inactive-icon>
            <image class="nav-icon-img" src="@/static/img/w_1.png" mode="aspectFit"></image>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="" @click="changMainPage(2)">
          <template #active-icon>
            <image class="nav-icon-img active" src="@/static/img/m_2.png" mode="aspectFit"></image>
          </template>
        </up-tabbar-item>
      </up-tabbar>
    </view>

    <!--  -->
    <up-modal
      :show="pagedata.showLoginOut"
      @cancel="pagedata.showLoginOut = false"
      @confirm="loginOut"
      :confirmText="t('logout')"
      :cancelText="t('cancel')"
      :showCancelButton="true"
      :title="t('logout')"
      :content="t('Confirm to log out and log in')"
    ></up-modal>

    <!-- Telegram  -->
    <a :href="pagedata.aircraftUrl" target="_blank">
      <img class="telegram-fixed-icon" src="@/static/teltgram.png" />
    </a>
  </view>
</template>

<style lang="scss" scoped>
.user-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  padding-bottom: 120rpx;
}

.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;

  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
  }

  .circle-1 {
    width: 200rpx;
    height: 200rpx;
    top: 15%;
    right: -50rpx;
    animation: float 6s ease-in-out infinite;
  }

  .circle-2 {
    width: 150rpx;
    height: 150rpx;
    bottom: 25%;
    left: -30rpx;
    animation: float 8s ease-in-out infinite reverse;
  }

  .circle-3 {
    width: 100rpx;
    height: 100rpx;
    top: 60%;
    right: 20%;
    animation: float 10s ease-in-out infinite;
  }

  .floating-shape {
    position: absolute;
    font-size: 40rpx;
    animation: bounce 3s ease-in-out infinite;
  }

  .shape-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
  }

  .shape-2 {
    top: 50%;
    right: 15%;
    animation-delay: 1s;
  }

  .shape-3 {
    bottom: 30%;
    left: 20%;
    animation-delay: 2s;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

// 
.user-card {
  margin: 60rpx 30rpx 40rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 30rpx;
  padding: 50rpx 40rpx;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;

  .user-info-section {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;

    .avatar-container {
      margin-right: 30rpx;

      .avatar-circle {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea, #764ba2);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);

        .avatar-icon {
          font-size: 48rpx;
          color: white;
        }
      }
    }

    .user-text-info {
      flex: 1;

      .user-name {
        display: block;
        font-size: 36rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 8rpx;
      }

      .user-id {
        display: block;
        font-size: 28rpx;
        color: #6c757d;
        font-weight: normal;
        margin-bottom: 15rpx;
      }

      .user-level-badge {
        display: inline-block;
        background: linear-gradient(135deg, #667eea, #764ba2);
        padding: 8rpx 20rpx;
        border-radius: 20rpx;
        
        .level-text {
          font-size: 30rpx;
          color: white;
          font-weight: 600;
        }
      }
    }
  }

  .balance-info-section {
    display: flex;
    justify-content: space-between;
    gap: 35rpx;

    .balance-item {
      flex: 1;
      text-align: center;

      .balance-label {
        display: block;
        font-size: 20rpx;
        color: #6c757d;
        margin-bottom: 15rpx;
      }

      .balance-value {
        display: flex;
        align-items: baseline;
        justify-content: center;

        .currency-symbol {
          font-size: 50rpx;
          color: #667eea;
          font-weight: bold;
          margin-right: 8rpx;
        }
      }
    }
  }
}

// 
.menu-container {
  margin: 0 30rpx 30rpx;
  position: relative;
  z-index: 1;

  .menu-row {
    display: flex;
    gap: 20rpx;
    margin-bottom: 20rpx;

    .menu-card {
      flex: 1;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 25rpx;
      padding: 40rpx 30rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      cursor: pointer;
      min-height: 200rpx;

      &:active {
        transform: scale(0.95);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      }

      &.logout-card {
        .menu-icon-wrapper.logout-icon {
          background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.2));
        }

        .menu-title.logout-text {
          color: #dc3545;
        }
      }

      .menu-icon-wrapper {
        width: 100rpx;
        height: 100rpx;
        border-radius: 25rpx;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25rpx;

        .menu-icon {
          font-size: 48rpx;
        }
      }

      .menu-title {
        font-size: 26rpx;
        color: #495057;
        font-weight: 600;
        text-align: center;
        line-height: 1.4;
      }
    }
  }
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: var(--uni-app-max-width);

  .nav-icon-img {
    width: 60rpx;
    height: 60rpx;
    transition: all 0.3s ease;

    &.active {
      transform: scale(1.2);
      filter: brightness(1.2);
    }
  }
}


</style>